<template>
  <el-container class="main_con">
    <div class="receipt">
      <div class="preview"><receiptPreview :obj="obj"></receiptPreview></div>

      <div class="content">
        <div class="setting">
          <el-form size="medium" label-width="100px" ref="itemForm" :model="obj" :rules="itemRules" class="edit_form" style="width:100%">
            <div class="header">模板信息</div>

            <el-form-item label="模板类型">
              <el-radio-group v-model="mt"><el-radio :label="1">商品订单</el-radio></el-radio-group>
            </el-form-item>

            <el-form-item label="打印纸宽">
              <el-radio-group v-model="pw"><el-radio :label="1">58mm</el-radio></el-radio-group>
            </el-form-item>

            <el-form-item label="模板名称" prop="name"><el-input v-model="obj.name" placeholder="请输入模板名称" style="width:300px;"></el-input></el-form-item>

            <el-form-item label="语音信息" prop="config.voice"><el-input v-model="obj.config.voice" placeholder="请输入语音提示信息" style="width:300px;"></el-input></el-form-item>

            <div class="header">展示内容</div>
            <div class="items">
              <table cellspacing="0" cellpadding="0" width="100%">
                <tr>
                  <td width="200">头部内容</td>
                  <td><el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.header.company">商户店铺</el-checkbox></td>
                </tr>
                <tr>
                  <td>商品信息</td>
                  <td>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.commodity.goods.name" :disabled="false">商品名称</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.commodity.goods.count">商品数量</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.commodity.goods.money">商品金额</el-checkbox>
                    <!-- <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="checked">商品编码</el-checkbox> -->
                    <!-- <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="checked">商品规格</el-checkbox> -->
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.commodity.total">合计</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.commodity.freight">运费</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.commodity.reduction">优惠金额</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.commodity.pay_price">支付价格</el-checkbox>
                  </td>
                </tr>
                <tr>
                  <td>订单信息</td>
                  <td>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.order.order_no">订单编号</el-checkbox>
                    <!-- <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="checked">支付渠道</el-checkbox> -->
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.order.create_time">下单时间</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.order.pay_time">付款时间</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.order.receiving_time">收货时间</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.order.delivery_time">配送/自提时间</el-checkbox>
                  </td>
                </tr>
                <tr>
                  <td>用户信息</td>
                  <td>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.user.user_name">用户昵称</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.user.mobile">用户手机号</el-checkbox>
                    <!-- <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="checked">用户等级</el-checkbox>
                  <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="checked">分销商等级</el-checkbox> -->
                  </td>
                </tr>
                <tr>
                  <td>备注信息</td>
                  <td><el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.user.remake">买家留言</el-checkbox></td>
                </tr>
                <tr>
                  <td>买家信息</td>
                  <td>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.receiving.consignee">买家姓名</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.receiving.iphone">联系方式</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.receiving.address">买家地址</el-checkbox>
                  </td>
                </tr>
                <tr>
                  <td>商城信息</td>
                  <td>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.shop.qrcode">商城二维码</el-checkbox>
                    <el-input v-if="obj.config.shop.qrcode == 1" v-model="qrcode" size="mini" placeholder="二维码内容" style="width:300px;margin-right:20px"></el-input>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.shop.mobile">联系方式</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.shop.address">商城地址</el-checkbox>
                  </td>
                </tr>
              </table>

              <div style="margin-top:20px;">
                <el-form-item label="底部内容" prop="config.bottom">
                  <el-input v-model="obj.config.bottom" placeholder="请输入小票底部内容" type="textarea" rows="3" style="width:300px;"></el-input>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
        <div class="btns"><el-button type="primary" v-has @click="saveData">保存设置</el-button></div>
      </div>
    </div>
  </el-container>
</template>

<script>
import receiptPreview from './components/receiptPreview';
import {addReceiptTemplate, editReceiptTemplate, getReceiptTemplate} from '@/api/shop/print';
import {objCopy} from '@/utils/index';

export default {
  data() {
    return {
      checked: false,
      mt: 1,
      pw: 1,
      pageIsEdit: 0, //0->新增,1->编辑,2->通过申请
      pageName: '新增模板',
      isLoading: false,
      qrcode: '',
      obj: {
        name: '',
        config: {
          voice: '',
          user: {
            mobile: 1,
            remake: 1,
            user_name: 1
          },
          order: {
            order_no: 1,
            create_time: 1,
            receiving_time: 1,
            pay_time: 1
          },
          header: {
            company: 1
          },
          bottom: '谢谢惠顾，欢迎下次光临',
          commodity: {
            goods: {
              name: 1,
              count: 1,
              money: 1
            },
            total: 1,
            freight: 1,
            pay_price: 1,
            reduction: 1
          },
          receiving: {
            iphone: 1,
            address: 1,
            consignee: 1
          },
          shop: {
            qrcode: 1,
            mobile: 1,
            address: 1
          }
        }
      },
      itemRules: {
        name: [
          {
            required: true,
            message: '模板名称必须填写'
          }
        ],
        'config.voice': [
          {
            required: true,
            message: '语音提示信息必须填写'
          }
        ],
        'config.bottom': [
          {
            required: true,
            message: '底部信息必须填写'
          }
        ]
      }
    };
  },
  components: {
    receiptPreview
  },
  created() {
    //获取路由参数(编辑时使用)
    if (this.$route.query.id) {
      //编辑页面
      this.pageIsEdit = 1;
      this.pageName = '编辑模板';
      this.$route.meta.title = '编辑模板';
      this.getTemplate(this.$route.query.id);
    } else {
      this.pageIsEdit = 0;
      this.pageName = '新增模板';
      this.$route.meta.title = '新增模板';
    }
  },
  methods: {
    getTemplate(id) {
      this.isLoading = true;
      getReceiptTemplate(id)
        .then(res => {
          this.isLoading = false;
          let o = res.msg;
          let i = JSON.parse(o.config);
          //赋值
          this.obj.id = o.id;
          this.obj.name = o.name;

          if (i.shop.qrcode != 0) {
            this.qrcode = i.shop.qrcode;
            i.shop.qrcode = 1;
        
 }

          this.obj.config = i;
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //保存数据
    saveData() {
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          //处理数据
          let x = {...this.obj};
          if (x.config.shop.qrcode == 1) {
            if (this.qrcode) {
              x.config.shop.qrcode = this.qrcode;
            } else {
              this.$message.error('二维码不能为空！');
            }
          }
          this.isLoading = true;
          if (this.pageIsEdit) {
            //编辑
            editReceiptTemplate(x, x.id)
              .then(res => {
                this.isLoading = false;
                this.$router.push('/receipt/index');
              })
              .catch(e => {
                this.isLoading = false;
              });
          } else {
            //新增
            addReceiptTemplate(x)
              .then(res => {
                this.isLoading = false;
                this.$router.push('/receipt/index');
              })
              .catch(e => {
                this.isLoading = false;
              });
          }
        } else {
          //console.log('error')
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}

.preview {
  height: calc(100vh - 90px);
  overflow-y: scroll;
  margin-right: 10px;
}

.receipt {
  display: flex;

  .content {
    background-color: #fff;
    flex-grow: 1;
    padding: 20px;
    padding-bottom: 0;

    .setting {
      height: calc(100vh - 170px);
      overflow-y: auto;

      .header {
        background-color: #e0e3e8;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        margin-bottom: 20px;
      }

      .items {
        table {
          border-collapse: collapse;
          font-size: 14px;

          tr {
            td {
              border: 1px solid #e0e3e8;
              height: 50px;
              line-height: 50px;
              padding-left: 20px;
            }
          }
        }
      }
    }

    .btns {
      height: 60px;
      line-height: 60px;
      box-sizing: border-box;
      border-top: 1px solid #dcdfe6;
    }
  }
}
</style>
